<!--
 * @Date: 2022-01-07 09:14:46
 * @Version: 1.0.0
 * @Author: chenhengling
 * @Description: antdv年选择器组件示例
 * @FilePath: \ant-year-picker\src\examples\antYearPicker.vue
 * @LastEditTime: 2022-08-02 10:02:35
 * @LastEditors: chenhengling
-->
<template>
  <a-config-provider :locale="locale">
    <div>
      <!-- 默认日期组件 -->
      <a-divider>默认日期组件</a-divider>
      <a-date-picker v-model="year" format="YYYY/MM/DD HH:mm" value-format="YYYY" :disabled-date="disabledDate">
        <template slot="dateRender" slot-scope="current, today">
          <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
            {{ current.date() }}
          </div>
        </template>
        <template slot="suffixIcon">
          <span>IC</span>
        </template>
        <!-- <span>{{ year ? year : 'SelectTime' }}</span> -->
      </a-date-picker>
      <!-- 初始年组件 -->
      <a-divider>初始年组件</a-divider>
      <a-year-picker></a-year-picker>
      <!-- 配置年组件 -->
      <a-divider>配置年组件</a-divider>
      <a-year-picker
        v-model="year"
        placeholder="请选择"
        format="YYYY年"
        value-format="YYYY"
        :open="open"
        :disabled-date="disabledDate"
        :allow-clear="false"
        @panel-change="handleFocus"
      >
        <template slot="dateRender" slot-scope="current, today">
          <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
            {{ current.date() }}
          </div>
        </template>
        <template slot="suffixIcon">
          <span>IC</span>
        </template>
        <!-- <span>{{ year ? year : 'SelectTime' }}</span> -->
      </a-year-picker>
      <!-- 控制 -->
      <a-divider></a-divider>
      <a-button type="primary" @click="handleChange">change</a-button>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import {
  ConfigProvider as AConfigProvider,
  DatePicker as ADatePicker,
  Divider as ADivider,
  Button as AButton,
} from 'ant-design-vue';
import 'ant-design-vue/es/divider/style/css.js';
import 'ant-design-vue/es/date-picker/style/css.js';
import AYearPicker from '../components/antYearPicker';

export default {
  name: 'ant-year-picker-example',
  components: { AConfigProvider, ADivider, AButton, ADatePicker, AYearPicker },
  data() {
    return {
      locale: zhCN,
      year: '2011',
      open: false,
    };
  },
  watch: {
    year(val) {
      console.log('watch', val);
    },
  },
  methods: {
    handleFocus() {
      console.log('focus');
    },
    handleChange() {
      this.open = Math.random() > 0.5;
      this.year = String(Math.floor(Math.random() * 20) + 2010);
    },
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
    getCalendarContainer(triggerNode) {
      return triggerNode.parentNode;
    },
    disabledDate(date) {
      return date.year() > 2022;
    },
  },
};
</script>
